<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>数据集配置</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>模型训练</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context">
            <div class="title">参数配置</div>
            <div class="config">
                <div class="config-div">
                    <div class="config-title">训练参数</div>
                    <div class="config-item">
                        <div class="config-item-title">学习率 &nbsp;&nbsp;<img src="../../../../../assets/images/question.png"/></div>
                        <div class="config-item-form"><input nz-input placeholder="学习率"/></div>
                    </div>
                    <div class="config-item">
                        <div class="config-item-title">最大训练轮次</div>
                        <div class="config-item-form"><input nz-input placeholder="最大训练轮次"/></div>
                    </div>
                    <div class="config-item">
                        <div class="config-item-title">最大运行时长</div>
                        <div class="config-item-form"><nz-switch nzSize="small" [ngModel]="true"></nz-switch>&nbsp;&nbsp;训练运动达到最大时长后会停止，可能会导致训练失败</div>
                    </div>
                    <div class="config-item">
                        <div class="config-item-title"></div>
                        <div class="config-item-form"><input style="width: 100px;" nz-input placeholder=""/>&nbsp;&nbsp;小时&nbsp;&nbsp;<input style="width: 100px;" nz-input placeholder=""/>&nbsp;&nbsp;分钟</div>
                    </div>
                    <div class="config-item">
                        <div class="config-item-title">训练集&验证集比例&nbsp;&nbsp;<img src="../../../../../assets/images/question.png"/></div>
                        <div class="config-item-form"><nz-slider [(ngModel)]="proportion" style="width: 400px;" ></nz-slider></div>
                    </div>
                    <div class="config-item">
                        <div class="config-item-title">&nbsp;</div>
                        <div class="config-item-form sbetween">
                            <div><div class="block-a">&nbsp;</div>&nbsp;训练集比例{{ proportion }}%</div>
                            <div><div class="block-b">&nbsp;</div>&nbsp;验证集比例{{ 100 - proportion }}%</div>
                        </div>
                    </div>
                </div>
                <div class="config-div">
                    <div class="config-title">Value词表配置</div>
                    <div class="add-item" (click)="addKey()" style="cursor: pointer;width: 80px;"><img src="../../../../../assets/images/icon_add.png"/>&nbsp;&nbsp;增加</div>
                    <div class="item-group" *ngFor="let item of listAddItem">
                        <div class="add-item">
                            <nz-select id="{{ 'type'+item.id }}" style="width: 520px">
                                <nz-option nzValue="海关编号" nzLabel="海关编号"></nz-option>
                                <nz-option nzValue="出境关别" nzLabel="出境关别"></nz-option>
                                <nz-option nzValue="出口日期" nzLabel="出口日期"></nz-option>
                                <nz-option nzValue="运输工具名称及航班号" nzLabel="运输工具名称及航班号"></nz-option>
                                <nz-option nzValue="境内货源地" nzLabel="境内货源地"></nz-option>
                                <nz-option nzValue="商品名称及规格型号" nzLabel="商品名称及规格型号"></nz-option>
                                <nz-option nzValue="申报单位" nzLabel="申报单位"></nz-option>
                            </nz-select>
                        </div>
                        <div class="add-item">
                            <nz-tree-select
                                id="{{ 'val'+item.id }}"
                                style="width: 520px"
                                [(ngModel)]="listOfSelectedValue"
                                [nzNodes]="nodes"
                                nzShowSearch="true"
                                nzCheckable
                                >
                                </nz-tree-select>
                        </div>
                    </div>
                </div>
            </div>            
            <div class="title">训练详情</div>
            <div class="result">
                <div class="tab-main" *ngIf="step==2">                            
                    <div style="margin-top: 150px;">
                        <div class="tips-err">训练失败<div class="tips-img-err"><img src="../../../../../assets/images/err.png"></div></div>
                        <div class="tips"><span>您的训练数据集有效时长为</span> <span style="color: #f66f6a;">5.56h</span><span>,不足10h。请</span><span style="color: #526ecc;">增加数据量</span><span>后再训练。</span></div>
                        <div><button nz-button nzType="defalut" >修改配置</button></div>   
                    </div>                    
                </div>
                <div class="tab-main" *ngIf="step==0">
                    <div class="tips-img"><img src="../../../../../assets/images/epy.png"></div>
                    <div class="tips">暂未开始训练模型</div>
                    <div><button nz-button nzType="defalut" (click)="startTrain()" >开始训练</button></div>                       
                </div>
                <div class="tab-main" *ngIf="step==1">
                    <div class="tips-img"><img src="../../../../../assets/images/runing.png"></div>
                    <div class="tips">数据准备中，预计需要2-3分钟...</div>                            
                </div>
                <div class="tab-main" *ngIf="step==3">
                    <div class="formInfo">
                        <div class="icon"><img src="../../../../../assets/images/run2.png"></div>
                        <div class="state">训练中...</div>
                        <div class="item-title">训练进度</div>
                        <div class="item-val"><nz-progress [nzPercent]="30" nzStrokeColor="green"></nz-progress></div>
                        <div class="item-title">预计剩余训练时间</div>
                        <div class="item-val">评估中...</div>
                        <div class="item-title">总训练轮次</div>
                        <div class="item-val">0</div>
                    </div>
                    <div class="formInfo" style="margin-bottom: 30px;">
                        <div class="icon"></div>
                        <div class="state"><button nz-button nzType="defalut">取消</button></div>
                        <div class="item-title">目前训练轮次</div>
                        <div class="item-val">3</div>
                        <div class="item-title">当前准确率</div>
                        <div class="item-val">2</div>
                        <div class="item-title">当前误差</div>
                        <div class="item-val">5</div>
                    </div>
                    <div class="statInfo">
                        <div class="leftChart">
                            <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                        </div>
                        <div class="rightChart">
                            <div echarts [options]="lineChart" style="height: 100%;width:100%;"></div>
                        </div>                                
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" class="prebutton">上一步</button>
        <button nz-button nzType="defalut" class="nextbutton" (click)="nextStep()">下一步</button>
    </div>
</div>